<template>
  <el-dialog :visible="visible" :title="formData ? '编辑菜单' : '新增菜单'" @close="hide">
    <el-form ref="menuEditRef" :model="form_data" label-width="100px" :rules="form_data.type === 2 ? editFormRule : editFormRule1">
      <el-form-item v-show="false" prop="id">
        <el-input v-model="form_data.id" />
      </el-form-item>
      <el-row>
        <el-col :span="11">
          <el-form-item label="菜单名称" prop="name">
            <el-input v-model="form_data.name" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="菜单编号" prop="code">
            <el-input v-model="form_data.code" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="所属应用" prop="application">
            <el-select
              v-model="form_data.application"
              :disabled="formData && Object.keys(formData) > 0"
              @change="getPMenuList"
            >
              <el-option v-for="item in appList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="菜单层级" prop="type">
            <el-radio-group v-model="form_data.type">
              <el-radio :label="0">目录</el-radio>
              <el-radio :label="1">菜单</el-radio>
              <el-radio :label="2">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="父级菜单" prop="pid">
            <el-select ref="menuTreeSelect" v-model="form_data.pid" placeholder="">
              <el-option :value="currentMenu.id" :label="currentMenu.title" style="height: auto">
                <el-tree
                  default-expand-all
                  :expand-on-click-node="false"
                  :data="pMenuList"
                  node-key="id"
                  highlight-current
                  :props="{children: 'children', label: 'title'}"
                  @node-click="handleCheckChange"
                />
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="打开方式" prop="openType">
            <el-radio-group v-model="form_data.openType" :disabled="form_data.type === 2">
              <el-radio v-for="item in openTypeList" :key="item.label" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="前端组件" prop="component" >
            <el-input v-model="form_data.component" />
          </el-form-item>
        </el-col>
        <el-col v-if="form_data.type !== 2" :span="11">
          <el-form-item label="路由地址" prop="router">
            <el-input v-model="form_data.router" />
          </el-form-item>
        </el-col>
        <el-col v-else :span="11">
          <el-form-item label="权限标识" prop="permission">
            <el-input v-model="form_data.permission" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="图标" prop="icon">
            <el-input v-model="form_data.icon" readonly>
              <el-popover
                slot="append"
                v-model="iconApprovalVisible"
                placement="top"
                width="400"
                trigger="click"
              >
                <div class="icon-list-container">
                  <span v-for="item in iconList" :key="item" @click="checkIcon(item)">
                    <i :class="item" />
                  </span>
                </div>
                <el-button slot="reference" icon="el-icon-setting" />
              </el-popover>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form_data.sort" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { GetMenuApplication, GetParentMenuByApplication, MenuSet } from '@/api/system';
import { OPEN_TYPE_LIST } from '@/constant';
import { elementIcons } from '@/utils/icon';
const Form_rules = {
  name: [
    {
      required: true, message: '菜单名称不能为空', trigger: 'blur'
    }
  ],
  router: [
    {
      required: true, message: '不能为空', trigger: 'blur'
    }
  ],
  code: [
    {
      required: true, message: '菜单编号不能为空', trigger: 'blur'
    }
  ],
  application: [
    {
      required: true, message: '请选择所属应用'
    }
  ],
  openType: [
    {
      required: true, message: '请选择打开方式', trigger: 'blur'
    }
  ],
  pid: [
    {
      required: true, message: '请选择父级菜单'
    }
  ],
  permission: [
    {
      required: true, message: '不能为空'
    }
  ],
  type: [
    {
      required: true, message: '请选择菜单层级', trigger: 'blur'
    }
  ]
}
export default {
  name: 'MenuEdit',
  props: {
    formData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      iconList: elementIcons,
      visible: false,
      form_data: {
        type: 0,
        openType: 0
      },
      appList: [],
      pMenuList: [],
      currentMenu: {},
      openTypeList: OPEN_TYPE_LIST,
      editFormRule: { ...Form_rules },
      editFormRule1: {
        ...Form_rules,
        component: [
          {
            required: true, message: '请输入前端组件', trigger: 'blur'
          }
        ]
      },
      iconApprovalVisible: false
    }
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler(n, o) {
        if (n && n !== o) {
          this.form_data = JSON.parse(JSON.stringify(n));
          if (n && n.application) {
            this.getPMenuList(n.application);
          }
        } else {
          this.form_data = {
            type: 0,
            openType: 0
          };
        }
      }
    }
  },
  mounted() {
    this.form_data = Object.assign(this.form_data, this.formData);
    this.getApplicationList();
  },
  methods: {
    changeType(val) {
      this.form_data.type = val;
    },
    show() {
      this.visible = true
    },
    hide() {
      this.form_data = {
        type: 0,
        openType: 0
      };
      this.currentMenu = {};
      this.$refs['menuEditRef'].clearValidate();
      this.$refs['menuEditRef'].resetFields();
      this.visible = false;
      this.$emit('clearPropForm')
    },
    getApplicationList() {
      GetMenuApplication().then(res => {
        if (res.code === 200) {
          this.appList = res.data;
        }
      });
    },
    getPMenuList(val) {
      GetParentMenuByApplication({ application: val }).then(res => {
        if (res.code === 200) {
          this.pMenuList = [{
            id: 0,
            title: '淮南统战部',
            children: res.data
          }];
          if (this.form_data.pid !== '' && this.form_data.pid !== undefined && this.form_data.pid !== null) {
            this.currentMenu = this.recursionGet(this.pMenuList, this.form_data.pid);
          }
        }
      });
    },
    handleCheckChange(data) {
      this.currentMenu = data;
      this.form_data.pid = data.id;
      this.$refs['menuTreeSelect'].blur();
    },
    handleSubmit() {
      this.$refs['menuEditRef'].validate((res) => {
        if (res) {
          const staticBody = {
            visible: 'Y',
            weight: '1',
            permission: '',
            sort: 100,
            icon: ''
          }
          const requestBody = { ...staticBody, ...this.form_data };
          MenuSet(requestBody).then(res => {
            if (res.code === 200) {
              this.$message.success(this.formData ? '编辑成功' : '新增成功');
              this.$emit('callback')
              this.hide();
            }
          });
        }
      });
    },
    recursionGet(data, valueId) {
      let value = null;
      for (let index = 0; index < data.length; index += 1) {
        if (data[index].id === valueId) {
          value = data[index];
          break;
        }
        if (data[index].children instanceof Array && data[index].children.length > 0) {
          const text = this.recursionGet(data[index].children, valueId);
          if (text) {
            return text;
          }
        }
      }
      return value;
    },
    checkIcon(val) {
      this.form_data.icon = val;
      this.iconApprovalVisible = false;
    }
  }
}
</script>

<style scoped lang="scss">
.el-select {
  width: 100%;

}
.el-select-dropdown__item.selected{
  background-color: #fff;
}

.icon-list-container {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;

  span {
    width: 40px;
    height: 40px;
    cursor: pointer;
    margin: 10px;

    i {
      font-size: 28px;
    }
  }
}
</style>
